<script setup>
import { ref, reactive } from "vue";
let titlearr = ["租车资格", "租车流程", "违章处理", "事故处理"];
let contenbodyarr = [
  `租车资格
租车前，请确认您满足以下条件、持有以下证件：
1. 年龄要求：年满22周岁
2. 证件要求：
　A. 首次取车时，请出示以下证件的原件：
　　(1)　本人的有效身份证件
　　　　a)境内客户：二代身份证
　　　　b)港澳客户：港澳居民来往内地通行证（回乡证）
　　　　c)台湾客户：大陆通行证（台胞证）
　　　　d)外籍客户：护照，签证/居住证
　　(2)　本人国内有效驾驶证
　　(3)　有效信用卡（本人）
　　　　a) 有效信用卡指有效期内的中国国内银行发行的信用卡，或国外银行发行的带有VISA、Master、JCB标志的
有磁条外卡；
　　　　b) 在您本人有信用卡并且信用额度足够时，可租所有车型；
　　　　c) 如您本人无信用卡，可通过持有信用卡的亲友进行担保 ，可租所有车型 。
　　(4)　其他说明：
　　　　a) 因违章等后续处理需要，以上证件，有效期须至少超过当次租期的一个月以上（非大陆客户两个月以上）；
　　　　b) 身份证件须通过公安局等相关机构验证，且验证结果与客户身份、头像一致；
　　　　c) 港澳台客户或外籍客户，首次租车时请提前一个工作日提交证件扫描件；
　　　　d) 中国大陆客户，请持国内信用卡租车。
　B.自第二次租车开始，您仅需出示驾照原件即可，无需再提供身份证件；标准预授权20000元及以下的车型，支持
使用国内借记卡（本人或他人）　　
　　支付与租车预授权相等额度的押金。
信用卡担保
如果您没有符合要求的信用卡，可请亲友为您提供担保，担保人对您在租车期间所产生的一切费用及责任承担无限连
带责任。
1. 担保人需持有足够信用额度的有效信用卡代您刷取租车预授权或押金，并需携带有效身份证原件和您一起在《租车
服务合同》上签字；
2. 每位担保人每次仅限担保1台车辆；
3.在您归还车辆之前，担保人自己不能租用成都蓉之风租车车辆，也不能再次为他人提供担保。
数量限制
每位客户每次限租1辆，即在您归还所租车辆之前，不能再租用其他车辆，也不能为其他人担保租车。`,
  `1. 取车时：
    (1)　付押金；支持预授权、现金、刷卡消费、或者转账等形式；
    (2)　客户取车时需先付预计租金。

2. 客户还车结算后：
    (1)　如消费在信用卡预授权中扣除：
              担保信用卡第一次预授权内剩余的信用额度将在3天左右解冻，各银行解冻时间稍有不同：
              a) 招商银行信用卡、民生银行信用卡、工商银行部分联名信用卡可即时解冻；
              b) 工商银行牡丹信用卡，以及部分中国银行、广发银行信用卡解冻时间为7-15个工作日；
              c) 其他银行解冻时间一般为3-5个工作日；
              d) 详情请询各发卡行。
    (2)　如消费直接在租车押金中扣除：扣除租金、电子眼押金等相关费用后，剩余押金还车当场以现金或者
    转账形式返还给客户。

3. 还车结算后，需押3000元-5000元作为 电子眼违章保证金
   (1)　金额：
              a) 没有违章的情况下：
                ■ 押金：在没有违章的情况下，蓉之更租车在客户还车后30天发起退款；
              b) 对产生违章并且未自行处理的客户：
                ■ 押金：蓉之风租车将在押金中扣除相应费用，剩余押金退还客户：`,
  `1. 违章押金操作说明：

客户与蓉之风租车公司签订租车合同时，同意在还车结算后按照蓉之风租车公司的规定缴付违章押金3000元-5000元。

2. 违章处理告知：

蓉之风租车公司在查询到客户违章后，将立即通知客户违章信息，客户也可根据每次租车的车牌号
及使用时间，自行查询是否有交通安全违法行为，客户应及时处理或同意由蓉之风公司代其处理车辆违章，并需承担
以下费用：

3.车辆租期内发生的违章罚款的实际金额；

    车辆租期内发生的违章扣分的处理费用；（按每一分150元除代办费）

    蓉之风租车公司有权在客户的违章押金中扣除以上费用，若违章押金不足，客户有义务将超出部分汇至我公司指定帐
户`,
  `一. 如车辆不慎出险，请您注意人身安全，并立即致电成都蓉之风租车24小时热线02887327655 18980602655报案，
车辆需由保险公司定损后再修理；

二. 为避免处理不当给您带来损失，请您按以下指引处理事故：

三. 如遇对方车辆肇事逃逸的、对方车辆无号牌的、对方驾驶员无驾驶证或饮酒后驾驶车辆的，请您记录相关信息（如
车牌号，车辆品牌，颜色以及肇事地点）并立即报警（122），等候交警处理，同时请您致电02887327655 
18980602655以获得保险方面的咨询和建议。

四. 如车辆与障碍物、建筑物发生碰撞，或车辆停放期间被碰撞而找不到肇事者，请您将车辆损坏部位以及碰撞物体进
行比对拍照，并致电02887327655 18980602655，以便车辆能够得到及时修复；

五. 如遇重大交通事故且有人员伤亡的，请保护现场，并拨打122交通事故报警台求助，同时请立即致电02887327655
 18980602655以获得保险方面的咨询和建议。`,
];
// 点击相应标签 改变页面展示内容
let count = ref(0);
let link = reactive(["linkon", "link", "link", "link"]);

let qiehuan = (digital) => {
  count.value = digital;

  // 排他
  for (let a = 0; a < link.length; a++) {
    if (a == digital) {
      link[a] = "linkon";
      console.log(a, digital);
    } else {
      link[a] = "link";
    }
  }
  console.log(link[digital], link);
};
</script>
<template>
  <Navigation></Navigation>
  <div class="imgbox">
    <img
      src="http://www.028rzf.com/public/uploads/images/2018/08/20180815182049141.jpg"
      alt=""
    />
  </div>
  <div class="context">
    <div class="title">
      <div>
        <p>常见问题</p>
      </div>
      <ul>
        <li
          @click="qiehuan(index)"
          :class="link[index]"
          v-for="(item, index) in titlearr"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="contenttitle">
        <h1>{{ titlearr[count] }}</h1>
      </div>
      <div class="contenbody">
        <pre>{{ contenbodyarr[count] }}</pre>
      </div>
    </div>
  </div>
  <Liucheng></Liucheng>
  <Footer1></Footer1>
</template>

<style scoped>
.imgbox {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
img {
  margin: auto -100%;
  vertical-align: middle;
}
.context {
  width: 1200px;
  display: flex;
  margin: auto;
  justify-content: space-between;
  font: 16px/1 "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: rgb(102, 102, 102);
  margin-top: 30px;
}
.content {
  width: 930px;
  /* background-color: aquamarine; */
  /* margin-left: 20px; */
  border: 1px solid rgb(238, 238, 238);
}
.title {
  width: 230px;
}
.title div {
  background-color: rgb(238, 238, 238);
  height: 50px;
  line-height: 50px;
}
.title p {
  margin-left: 20px;
  color: rgb(102, 123, 172);
}
.title ul {
  list-style-type: none;
}
.title ul li {
  height: 35px;
  line-height: 35px;
  border: 1px solid rgb(238, 238, 238);
  padding-left: 20px;
}

.contenttitle {
  height: 100px;
  border-bottom: 1px solid rgb(238, 238, 238);
}
.contenttitle h1 {
  padding: 30px 50px;
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  color: #333333;
}
pre {
  padding: 32px 50px;
  font-size: 16px;
  line-height: 26px;
  color: rgb(102, 102, 102);
  font-weight: 600;
}
.link:hover {
  color: red;
}
.linkon {
  background-color: rgb(219, 37, 52);
  color: aliceblue;
}
</style>
